<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<style>
		.content{width: 990px;margin: 20px auto;}
		.title{width: 100%;border-bottom: 2px solid red;}
		.title-content{width:300px;height: 40px; margin: 30px auto;}
		.img{float: left;}
		.text{margin-left: 20px; float: left;color: #3e3e3e;font-weight: 900;line-height:50px;font-size: 24px;}
		.mian{padding: 50px;margin: 0px auto;}
		form{width: 550px;margin: 10px auto;padding-left: 200px;}
		.input-text{display: inline-block;width: 80px;text-align: right;margin-right: 20px;font-weight: 100;font-size: 14px;}
		.input{border: 1px solid #dedede;width: 202px;height: 17px;line-height: 17px;padding: 9px;font-size: 14px;}
		.tongyi{padding-left: 50px; color: #3c3c3c; font-size: 12px;}
		.tongyi input{margin-right: 10px;}
		.tongyi a{text-decoration: none;color: red;}
		.tongyi a:hover{text-decoration: underline;}
		.submit{padding-left: 30px; margin: 50px auto;}
		.submit input{height: 36px;line-height: 36px;padding: 0 20px;color: #FFF;font-weight: 700;font-size: 16px;text-align: center;background: #ff4001;border: 0;border-radius: 3px;cursor: pointer;}

		#phonenumberNode{color: red;font-size: 12px;padding-left: 110px;opacity: 0;}
	</style>
</head>
<body>
	<div class="content">
		<div class="title">
			<div class="title-content">
				<div class="img"><img src="images/注册.png" width="60px" height="60px"></div>
				<div class="text">请填写账号信息</div>
			</div>
		</div>
		<div class="mian">
			<form >
				<div class="title-username">
					<h4>设置手机号码</h4>
					<p>
						<span class="input-text">手机号</span>
						<input type="tel" value="" class="phonenumber input" placeholder="请输入11位手机号" oninvalid="setCustomValidity('请输入正确的11位手机号码')" required 
						pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"/>
					</p><br>
				</div>
				<div class="title-username">
					<h4>设置您的登录名</h4>
					<p>
						<span class="input-text">登录名</span>
						<input type="text" class="username input" placeholder="登录名一旦设置成功,无法修改" required="required" oninvalid="setCustomValidity('用户名不能为空')"/>
					</p><br>
				</div>
				<div class="title-password">
					<h4>请设置登录密码 <span class="input-text" style="width: 200px;">登录时验证，保护账号信息</span></h4>
					<p>
						<span class="input-text">登陆密码</span>
						<input type="password" class="password input" required="required" id="pwdOne" placeholder="设置密码" onkeyup="KeyUp()"/>
					</p>
					<p>
						<span class="input-text">密码确认</span>
						<input type="password" class="password input" required="required" id="pwdTwo" placeholder="确认密码" onkeyup="KeyUp()"/>
					</p>
					<p id="phonenumberNode">两次输入的密码不相同</p>
					<br>
				</div>
				<div class="tongyi">
					<input type="checkbox" id="check">用户勾选即代表同意<a href="#">《天猫服务条款》</a>和<a href="#">《天猫隐私政策》</a>
				</div>
				<div class="submit">
					<input type="submit" value="注  册" />
				</div>
			</form>
		</div>
	</div>
<!--	以下为js的代码-->
	<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
	<script type="text/javascript">

		function KeyUp() {
              var a = $('#pwdOne').val();
              //alert(a);
             var b = $('#pwdTwo').val();
             //alert(b);
              if (a == b) {
                  $('#phonenumberNode').css('opacity','0')
                  return true;
              }
              else {
                $('#phonenumberNode').css('opacity','1')
                return false;
             }
           }
        $('.submit input').click(function(){
        	if($("#check").is(":checked")){
			return KeyUp();}else{alert("勾选《天猫服务条款》才能完成注册")}
        })   

	</script>
</body>
</html>